<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ARAFMI Monthly Report</title>
<link rel="stylesheet" href="/css/all.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" /> 
<link type="text/css" href="/css/cupertino/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<link href="/css/jquery.jqplot.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" src="/js/excanvas.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery.ui.core.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery.ui.widget.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery.ui.datepicker.js"></script>

<script class="code" type="text/javascript">
	
	$(document).ready(function(){		
		//from datepicker jQuery UI 
		$( "#datefrom" ).datepicker({
			changeMonth: true,
			changeYear: true
		});
        
		//to datepicker jQuery UI 
		$( "#dateto" ).datepicker({
			changeMonth: true,
			changeYear: true
		});		
		
		//TimeBandChart
        var s1 = [<* $sTimeBandChart *>];
        var ticks1 = [<* $ticksTimeBandChart *>];	
        plot1 = $.jqplot('TimeBandChart', [s1], {
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
			title: 'Time of Calls',
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks1
                }
            }
        });

		//DayWeekChart
        var s2 = [<* $sDayWeekChart *>];
        var ticks2 = [<* $ticksDayWeekChart *>];		
        plot2 = $.jqplot('DayWeekChart', [s2], {
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
			title: 'Day of Week',
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks2
                }
            },
            highlighter: { show: false }
        });
		
		//SourcesCallsChart
        var s3 = [<* $sSourcesCallsChart *>];
        var ticks3 = [<* $ticksSourcesCallsChart *>];		
        plot3 = $.jqplot('SourcesCallsChart', [s3], {
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
			title: 'Sources of Calls',
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks3
                }
            },
            highlighter: { show: false }
        });
    
    });

</script>
</head>

<body>

<div id="main_content"> 
    <form class="noprint" name="cpform" method="post" action="" id="cpform" onSubmit="" target="_blank">&nbsp;
      <table class="tb tb2 ">
        <tr>
			<td class="td22">Please Select a Date:</td>
			<td class="vtop rowform">&nbsp;From&nbsp;
				<input id="datefrom" name="datefrom" value="<* $datefrom *>" type="text" >&nbsp;To&nbsp;
				<input id="dateto" name="dateto" value="<* $dateto *>" type="text" >&nbsp;
				<input type="submit" class="btn" id="submit_submit" title="Search" value="Search" />
			</td>
        
        </tr>
        <script type="text/JavaScript">_attachEvent(document.documentElement, 'keydown', function (e) { entersubmit(e, 'submit'); });</script>
      </table>
    </form>
</div>

<div id="print">
	<table width="200" border="1">
		<tr>
			<td class="tp">From:<* $datefrom *></td>    
			<td class="tp">To:<* $dateto *></td>    				
		</tr>	
		<* foreach  from=$spResult item=report *>	
			<* if $report.Report_Title=="TimeBandChart" or $report.Report_Title=="DayWeekChart" or $report.Report_Title=="SourcesCallsChart" *>
				<tr>&nbsp;</tr>
				<tr>
					<td class="tb" colspan="3">
						<div id="<* $report.Report_Title *>" style="margin-top:20px; margin-left:10px; width:580px; height:300px;"></div>
					</td>
				</tr>
	
			<* else *>
				<tr>	
					<td class="tp"><* $report.Report_Key *></td>    
					<td class="tp tpr"> <* $report.Report_Value *></td>    
					<td class="tp tpw">&nbsp;</td>    
				</tr>				
			<* /if *>
		<* /foreach *>	
	</table>

	<div class="newpage">
		
	</div>
</div>
<script language="JavaScript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jqplot/jqplot.barRenderer.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jqplot/jqplot.categoryAxisRenderer.js"></script>
</body>
</html>